<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header onclick="pub()"><span >我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布" onclick="pub1()">
    </div>
</div>
<script>
	var tou=new Array("images/tou01.jpg","images/tou02.jpg","images/tou03.jpg","images/tou04.jpg");
	function pub(){
		e=document.getElementsByClassName("post")[0];
		e.style.display="block";
	}
	function pub1(){
		
		var titleH1=document.createElement("h1");
		var title=document.getElementsByClassName("title")[0].value;
		titleH1.innerHTML=title;
		var sectionSpan=document.createElement("p");
		var sectionCotent=document.getElementsByTagName("select")[0].value;
		sectionSpan.innerHTML="板块:"+sectionCotent;
		var curTimeSpan=document.createElement("p");
		var divimg=document.createElement("div");
		var t=new Date();
		var year=t.getFullYear();
		var month=t.getMonth()+1;
		var day=t.getDay();
		var hour=t.getHours();
		var minut=t.getMinutes();
		var curTime=year+"-"+month+"-"+day+" "+hour+":"+minut;
		curTimeSpan.innerHTML="发布时间："+curTime;
		var imageEle=document.createElement("img");
		var i=Math.floor(Math.random()*4);
		imageEle.setAttribute("src",tou[i]);
		divimg.appendChild(imageEle);
		var liSon=document.createElement("li");
		liSon.appendChild(divimg);
		liSon.appendChild(titleH1);
		liSon.appendChild(sectionSpan);
		liSon.appendChild(curTimeSpan);
		var hasLi=document.getElementsByTagName("ul")[0].firstElementChild;
		if(hasLi==null){
		var parentNo=document.getElementsByTagName("ul")[0];
		parentNo.appendChild(liSon);
		}else{
		var parentNo=document.getElementsByTagName("ul")[0];
		parentNo.insertBefore(liSon,hasLi);
		}		
		document.getElementsByClassName("post")[0].style.display="none";
		document.getElementsByClassName("title")[0].value="";
		document.getElementsByTagName("select")[0].value="请选择版块";
		document.getElementsByClassName("content")[0].value="";
	}
</script>
</body>
</html>